<template>
  <a-modal
    title="管理"
    :width="450"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-alert
        v-if="alertVisable"
        showIcon
        banner
        message="保存信息失败,请信息是否填写正确"
        type="error"
        closable
        @close="alertOnClose"
      />
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="24">
           
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
// import { saveRoleInfo, getRoleInfo } from './roleapi'

export default {
  name: 'Modal',
  props: {
  },
  data () {
    return {
      alertVisable: false, // 错误提示框
      confirmLoading: false,
      visible: false
    }
  },
  beforeCreate () {
  },
  created () {
  },
  methods: {
    // 关闭提示
    alertOnClose () {
      this.alertVisable = false
    },
    // 新增模式
    showAddModal () {
      this.visible = true
    },
    showEditModal (pid) {
      this.visible = true
    },
    close () {
      this.$emit('close')
      this.visible = false
    },
    // ok按钮
    handleOk () {
      this.close()
    },
    // 取消按钮
    handleCancel () {
      this.close()
    }

  }
}
</script>

<style>
  .avatar-uploader > .ant-upload {
    width: 200px;
    height: 200px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
